<template>
    <div>
        <div class="activity-right">
            <h3>订单统计列表</h3>
            <template style="margin-bottom:20px;">
                <div class="block" style="margin-bottom:20px;">
                    <el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    <el-button type="primary" icon="el-icon-search" @click="handleClick">搜索</el-button>
                </div>
            </template>
            <el-form v-if="form && form!=null" ref="form" :model="form" label-width="80px">
                <ul>
                    <li style="float:left;margin-right:30px;">
                        <el-form-item label="订单总数:">
                            <!-- <el-input  style="width:200px;" v-model="form.orderCount"></el-input> -->
                            <span style="color:red;font-size:30px">{{form.orderCount}}</span>
                        </el-form-item>
                    </li>
                    <li style="float:left;margin-right:30px;">
                        <el-form-item label="商品总数:">
                            <!-- <el-input style="width:200px" v-model="form.goodsCount"></el-input> -->
                            <span style="color:red;font-size:30px">{{form.goodsCount}}</span>
                        </el-form-item>
                    </li>
                    <li style="float:left;margin-right:30px;">
                        <el-form-item label="总金额:">
                            <!-- <el-input type="text" style="width:200px" v-model="form.totalPrice"></el-input> -->
                            <span style="color:red;font-size:30px">{{form.totalPrice}}</span>
                        </el-form-item>
                    </li>
                </ul>
            </el-form>
            <el-table class="table-common" ref="multipleTable" :data=" data " style="width: 100%">
                <el-table-column prop="imgUrl" label="活动logo" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgUrl" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="活动名称" width="180">
                </el-table-column>
                <el-table-column prop="orderStatistics.orderCount" label="总订单数" width="180">
                    <template slot-scope="scope">
                        <span style="color:red;font-size:20px">{{ scope.row.orderStatistics.orderCount}}</span>
                    </template>
                    <!-- {{orderStatistics.orderCount}} -->
                </el-table-column>
                <el-table-column prop="orderStatistics.goodsCount" label="总商品数" width="180">
                    <template slot-scope="scope">
                        <span style="color:red;font-size:20px">{{ scope.row.orderStatistics.goodsCount}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatistics.totalPrice" label="总金额" width="180">
                    <template slot-scope="scope">
                        <span style="color:red;font-size:20px">{{ scope.row.orderStatistics.totalPrice}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                prop="startTime"
                label="查询起始时间"
                width="180">
                    <template slot-scope="scope">{{ $formate(scope.row.startTime,'yyyy-MM-dd') }}</template>
                </el-table-column>
                <el-table-column
                prop="endTime"
                label="查询结束时间"
                width="180">
                    <template slot-scope="scope">{{ $formate(scope.row.endTime,'yyyy-MM-dd') }}</template>
                </el-table-column> -->

            </el-table>
            <!-- 分页 -->
        </div>
    </div>
</template>
<script>
import { getSalesAndPriceData } from "../../data/postData.js";
export default {
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            Page: JSON.parse(localStorage.getItem("Page")),
            searchTime: [
                new Date(new Date().setHours(0, 0, 0, 0)),
                new Date(new Date().setHours(23, 59, 59, 0))
            ],
            data: null,
            form: null,
            totalPrice: "",
            goodsCount: "",
            orderCount: ""
        };
    },
    mounted() {
        this.searchData();
    },
    methods: {
        handleClick() {
            console.log(this.searchTime);
            this.searchData();
        },
        searchData() {
            if (this.searchTime == null) {
                this.$message({
                    message: "请选择查询时间段",
                    type: "warning",
                    duration: 1000
                });
            } else {
                var params = {
                    data: {
                        startTime: new Date(this.searchTime[0]).getTime(),
                        endTime: new Date(this.searchTime[1]).getTime()
                        // "startTime":this.searchTime[0],
                        // "endTime":this.searchTime[1],
                    }
                };
                this.$fetch
                    .post(getSalesAndPriceData, params)
                    .then(res => {
                        console.log(res.data);
                        this.data = res.data.activitiesOrderStatistics;
                        this.form = res.data.orderStatistics;
                    })
                    .catch(err => {
                        this.$message({
                            message: err.message,
                            type: "warning",
                            duration: 1000
                        });
                    });
            }
        },
        pagePrev() {
            this.page--;
            this.getOrderList(this.page, this.logistic_status);
            localStorage.setItem("Page", JSON.stringify({ page: this.page }));
        },
        pageNext() {
            this.page++;
            this.getOrderList(this.page, this.logistic_status);
            localStorage.setItem("Page", JSON.stringify({ page: this.page }));
        }
    }
};
</script>
<style scoped lang="less">
.activity-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
        //font-size:24px;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 100px;
    }
    a {
        color: #409eff;
    }
}
</style>
